<template>
  <div>
    <el-form :model="menu" :rules="rules" ref="menuFrom" label-width="150px">
      <el-form-item label="菜单类型：">
        <el-radio-group v-model="menu.type">
          <el-radio label="M">目录</el-radio>
          <el-radio label="C">菜单</el-radio>
          <el-radio label="F">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="title">
        <template slot="label">{{
          menu.type === "M"
            ? "目录名称"
            : menu.type === "C"
            ? "菜单名称"
            : "按钮名称"
        }}</template>
        <el-input v-model="menu.title"></el-input>
      </el-form-item>
      <el-form-item v-if="menu.type != 'M'" label="上级菜单：">
        <treeselect
          v-if="menu.type == 'F' || menu.type == 'C'"
          v-model="menu.parentId"
          :options="treeList"
          placeholder="请选择菜单"
        />
        <!-- <el-select
          v-if="menu.type == 'C'"
          v-model="menu.parentId"
          placeholder="请选择菜单"
        >
          <el-option
            v-for="item in selectMenuList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item prop="name">
        <template slot="label">{{
          menu.type !== "F" ? "组件名称" : "按钮字符"
        }}</template>
        <el-input v-model="menu.name"></el-input>
      </el-form-item>
      <el-form-item label="前端图标：" v-if="menu.type == 'M'" prop="icon">
        <el-input v-model="menu.icon">
          <el-button
            slot="append"
            icon="el-icon-plus"
            @click="addMenuIcon"
          ></el-button>
        </el-input>
        <!-- <svg-icon style="margin-left: 8px" :icon-class="menu.icon"></svg-icon> -->
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio-group v-model="menu.hidden">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="menu.sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit('menuFrom')"
          >提交</el-button
        >
        <el-button size="small" v-if="!isEdit" @click="resetForm('menuFrom')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <icon-selete @getIcon="getIcon" ref="iconSeleteRef"></icon-selete>
  </div>
</template>

<script>
import iconSelete from "./iconSelete.vue";
import {
  createMenu,
  updateMenu,
  getMenu,
  getMenuList,
  fetchTreeListSecond
} from "@/api/menu";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
const defaultMenu = {
  title: "",
  parentId: null,
  name: "",
  icon: "",
  hidden: 0,
  sort: 0,
  type: "M"
};
export default {
  name: "MenuDetail",
  components: { Treeselect, iconSelete },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    "menu.type": {
      handler(oldVal, newVal) {
        if (oldVal != newVal) {
          // this.menu.parentId = null;
          this.menu.icon = "";
          this.name = "";
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      menu: Object.assign({}, defaultMenu),

      treeList: [],
      selectMenuList: [],
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur"
          }
        ],
        name: [
          { required: true, message: "请输入前端名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur"
          }
        ],
        icon: [
          { required: true, message: "请输入前端图标", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    if (this.isEdit) {
      getMenu(this.id).then(response => {
        this.menu = response.data;
        console.log(response);
      });
    } else {
      this.menu = Object.assign({}, defaultMenu);
    }
    this.getSelectMenuList();
    this.fetchTreeListSecond();
  },
  methods: {
    getIcon(e) {
      this.menu.icon = e;
    },
    addMenuIcon() {
      this.$refs.iconSeleteRef.openlog();
    },
    fetchTreeListSecond() {
      fetchTreeListSecond().then(res => {
        this.handleTreeNodes(res.data);
      });
    },

    handleTreeNodes(nodes) {
      nodes.forEach(node => {
        node.label = node.title;
        delete node.title;
        if (node.children && node.children.length > 0) {
          // 递归处理子节点
          this.handleTreeNodes(node.children);
        } else {
          delete node.children;
        }
      });
      this.treeList = nodes;
    },
    handleNodeClick(v) {},
    //  获取菜单列表
    getSelectMenuList() {
      getMenuList({
        parentId: 0
      }).then(response => {
        this.selectMenuList = response.data;
        // this.selectMenuList.unshift({ id: 0, title: "无上级菜单" });
      });
    },
    // 提交菜单
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.menu.type == "M" ? (this.menu.parentId = 0) : "";
            if (this.isEdit) {
              updateMenu(this.id, this.menu).then(response => {
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1000
                });
                this.$emit("closeDiaLog", true);
              });
            } else {
              createMenu(this.menu).then(response => {
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000
                });
                this.$emit("closeDiaLog", true);
              });
            }
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000
          });
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.menu = Object.assign({}, defaultMenu);
      this.getSelectMenuList();
    }
  }
};
</script>

<style scoped></style>
